import React, { useState } from 'react';
import InputField from '../UI/InputField';
import Button from '../UI/Button';
import ErrorToast from '../UI/ErrorToast';
import './LoginForm.css';

const LoginForm = ({ onGoToRegister, onLogin }) => {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleInputChange = (field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleSendCode = () => {
    // 发送验证码逻辑
    console.log('发送验证码');
  };

  const handleErrorClose = () => {
    setError('');
  };

  const handleLogin = async () => {
    // 验证输入
    if (!formData.username || !formData.password) {
      setError('请输入用户名和密码');
      return;
    }

    setError('');
    setLoading(true);

    try {
      // 通过 Electron API 验证登录
      if (window.electronAPI && window.electronAPI.validateLogin) {
        const result = await window.electronAPI.validateLogin(formData.username, formData.password);
        
        if (result.success && result.user) {
          // 登录成功
          console.log('登录成功:', result.user);
          if (onLogin) {
            onLogin(result.user);
          }
        } else {
          // 登录失败
          setError(result.error || '用户名或密码错误，请检查后重试');
        }
      } else {
        // 开发环境下的模拟登录（用于测试）
        console.warn('Electron API 不可用，使用模拟登录');
        setError('数据库连接不可用');
      }
    } catch (error) {
      console.error('登录错误:', error);
      setError('登录失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  const handleRegister = () => {
    if (onGoToRegister) {
      onGoToRegister();
    }
  };

  const handlePasswordLogin = () => {
    // 账号密码登录逻辑
    console.log('账号密码登录');
  };

  const handleWeChatLogin = () => {
    // 微信扫码登录逻辑
    console.log('微信扫码登录');
  };

  return (
    <>
      {/* 错误提示弹窗 */}
      <ErrorToast 
        message={error} 
        duration={3000}
        onClose={handleErrorClose}
      />
      
      <div className="login-form">
        <div className="login-form__header">
          <h1 className="login-form__title">登录 LOGIN</h1>
          <p className="login-form__register">
            没有账号吗? <span className="login-form__register-link" onClick={handleRegister}>注册新账号</span>
          </p>
        </div>

        <div className="login-form__body">
          <div className="login-form__input-group">
            <InputField
              type="text"
              placeholder="请输入用户名"
              value={formData.username}
              onChange={(value) => handleInputChange('username', value)}
              icon="user"
            />
          </div>

          <div className="login-form__input-group">
            <InputField
              type="password"
              placeholder="请输入密码"
              value={formData.password}
              onChange={(value) => handleInputChange('password', value)}
              icon="lock"
            />
          </div>

          <div className="login-form__button-group">
            <Button
              type="primary"
              onClick={handleLogin}
              className="login-form__login-button"
              disabled={loading}
            >
              {loading ? '登录中...' : '登录'}
            </Button>
          </div>
        </div>

        <div className="login-form__footer">
          <span className="login-form__footer-link" onClick={handlePasswordLogin}>
            使用账号密码登录
          </span>
          <span className="login-form__footer-separator">|</span>
          <span className="login-form__footer-link" onClick={handleWeChatLogin}>
            使用微信扫码登录
          </span>
        </div>
      </div>
    </>
  );
};

export default LoginForm;
